<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS轮播图</title>
    <style>
        .outer {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }

        .inner {
            width: 800px;
            border-radius: 10px;
            position: absolute;
            overflow: hidden;
        }

        .carousel {
            width: 2400px;
        }

        .carousel > img {
            width: 800px;
            height: 400px;
            float: left;
        }

        .btn {
            position: absolute;
            width: 40px;
            height: 70px;
            background-color: rgba(0, 0, 0, .3);
            background-repeat: no-repeat;
            background-position: 8px 11px;
            border-radius: 7px;
            top: 175px;
        }

        .prev {
            left: 20px;
            background-image: url("img/left.png");
        }

        .next {
            right: 20px;
            background-image: url("img/right.png");
        }

        .prev:hover, .next:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">
        <div class="prev btn"></div>
        <div class="carousel">
            <img src="img/item1.jpg" alt="" class="carousel_img">
            <img src="img/item2.jpg" alt="" class="carousel_img">
            <img src="img/item3.jpg" alt="" class="carousel_img">
        </div>
        <div class="next btn"></div>
    </div>
</div>

<script>
    var number = 0;
    var flag = true;

    /*
    * 视觉欺骗
    * 克隆第一张图片到最后一张图片后边
    * */
    var first_img = document.getElementsByClassName('carousel_img')[0];
    var carousel = document.getElementsByClassName('carousel')[0];
    carousel.appendChild(first_img.cloneNode());
    carousel.style.width = carousel.scrollWidth + first_img.offsetWidth + 'px';

    // 点击上一张按钮
    document.getElementsByClassName('prev')[0].onclick = function(){btn_click('prev')};

    // 点击下一张按钮
    document.getElementsByClassName('next')[0].onclick = function(){btn_click('next')};

    // 按钮点击函数
    function btn_click(type){
        if(flag){
            // 视觉欺骗
            if (type === 'prev'){
                if(number === 0){
                    number = -2400;
                }
            }else if (type === 'next'){
                if(number === -2400){
                    number = 0;
                }
            }
            move_img(type);
        }
    }

    // 移动图片函数
    function move_img(type) {
        var img_interval = setInterval(function () {
            /*
            * 图片移动过程中, 将 flag 置为 false
            * 此时点击按钮无作用
            * 保证同一时刻仅有一个移动图片的定时器在执行
            * */
            flag = false;
            if (type === 'prev') {
                number += 5;
            }else if (type === 'next'){
                number -= 5;
            }

            var carousel = document.getElementsByClassName('carousel')[0];
            carousel.style.marginLeft = number + 'px';
            if (number % 800 === 0) {
                /*
                * 图片移动完毕, 修改flag为true
                * */
                flag = true;
                clearInterval(img_interval);
            }
        }, 1)
    }

    /*
    * 图片自动轮播
    * 每隔 3 秒轮播一次
    * */
    var img_interval = setInterval(function(){
        btn_click('next');
    },3000)
</script>
</body>
</html>